<template>
    <div class="nav-side">
        <ul>
            <li class="custom-service" id="div_udesk_im">
                <a href="javascript:;">
                    <div>有问题联系我们</div>
                    <i class="iconfont icon-kefu"></i>
                </a>
            </li>
            <li class="custom-service">
                <a href="tools.html#/pcc" target="_blank">
                    <div>票查查</div>
                    <i class="iconfont icon-piaochacha"></i>
                </a>
            </li>
            <li>
                <a href="tools.html#/calc" target="_blank">
                    <div>贴现计算器</div>
                    <i class="iconfont icon-jisuanqi1"></i>
                </a>
            </li>
            <li>
                <a href="tools.html#/calendar" target="_blank">
                    <div>贴现日历</div>
                    <i class="iconfont icon-rili1"></i>
                </a>
            </li>
            <li>
                <a href="tools.html#/querybank" target="_blank">
                    <div>行号查询</div>
                    <i class="iconfont icon-hanghaochaxun1"></i>
                </a>
            </li>
            <transition name="fade">
                <li v-if="isShow" @click="backTop">
                    <div>返回顶部</div>
                    <i class="iconfont icon-fanhuidingbu"></i>
                </li>
            </transition>
        </ul>
    </div>
</template>

<script lang="ts">
    import {Vue, Component, Prop} from 'vue-property-decorator'
    @Component
    export default class SideBtn extends Vue {
        isShow = false // 是否显示回到顶部
        isTop = true
        timer = null
        backTop () {
            this.timer = setInterval(() => {
                let osTop = document.documentElement.scrollTop || document.body.scrollTop
                let ispeed = Math.floor(-osTop / 5)
                document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed
                this.isTop = true
                if (osTop === 0) {
                    clearInterval(this.timer)
                }
            },20)
        }
        needScroll () {
            let clientHeight = document.documentElement.clientHeight
            window.onscroll = () => {
                let osTop = document.documentElement.scrollTop || document.body.scrollTop
                if (osTop >= clientHeight / 2) {
                    this.isShow = true
                } else {
                    this.isShow = false
                }
                if (!this.isTop) {
                    clearInterval(this.timer)
                }
                this.isTop = false
            }
        }
        mounted() {
            this.needScroll()
        }
    }
</script>

<style lang="scss" scoped>
    .nav-side{
        width: 50px;
        ul,li{
            display: block;
            width: 50px;
            padding: 0;
            margin: 0;
        }
        li{
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: $__color-border;
            position: relative;
            cursor: pointer;
            div{
                display: none;
                width: 120px;
                height: 50px;
                position: absolute;
                left: -120px;
                background: $__color-primary;
                color: #fff;
                font-size: 14px;
                cursor: pointer;
            }
            a{
                display: block;
                width: 50px;
                height: 50px;
            }
            .iconfont{
                font-size: 24px;
                color: #fff;
            }
            &:first-child{
                background-color: $__color-show;
                .iconfont{
                    color: #fff;
                }
            }
            &:hover{
                div{
                    display: block !important;
                    -webkit-animation:fadeInLeftBig .3s 0s ease both;
	                -moz-animation:fadeInLeftBig .3s 0s ease both;
                }
            }
        }
    }
    .fade-enter-active {
        transition: all .3s ease;
    }
    .fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .fade-enter, .fade-leave-to
        /* .fade-leave-active for below version 2.1.8 */ {
        // transform: translateY(15px);
        opacity: 0;
    }
    @-webkit-keyframes fadeInLeftBig{
        0%{
            opacity:0;
            -webkit-transform:translateX(-60px);
        }
        100%{
            opacity:1;
            -webkit-transform:translateX(0);
        }
    }
</style>